<template lang="pug">
  .sidebar-menu(ref="menu")
    ul.menu-items(ref="menuList")
      NavItem(
        v-for="(item,index) in navTree"
        :key="index"
        :item="item"
        @updateScroll="updateScroll")
</template>

<script>
import IScroll from 'iscroll'
import NavItem from './NavItem'

export default {
  name: 'NavList',
  components: {
    NavItem
  },
  props: {
    navTree: Array
  },
  mounted () {
    this.$nextTick(() => {
      this.initScroll()
    })
  },
  updated () {
    this.updateScroll()
  },
  watch: {
    '$refs.menuList.offsetHeight' (data) {
      console.log(data)
    }
  },
  data () {
    return {}
  },
  methods: {
    updateScroll () {
      this.$nextTick(() => {
        this.menuScroll.refresh()
      })
    },
    initScroll () {
      if (this.menuScroll) {
        this.menuScroll.destroy()
        this.menuScroll = null
      }
      this.menuScroll = new IScroll(this.$refs.menu, {
        scrollbars: true,
        mouseWheel: true,
        interactiveScrollbars: true,
        shrinkScrollbars: 'scale',
        fadeScrollbars: true
      })
    }
  }
}
</script>

<style lang="sass" scoped>
.verticalBarClass
  background-color: #9cc5a1
.verticalBarInternalClass
  background-color: #216869
.content
  position: relative
  width: 320px
  height: 800px
  text-align: center
.el1
  height: 800px
  margin: 0 auto
.iScrollVerticalScrollbar
  background-color: #1E2028
  /* Styled scrollbars */
.iScrollHorizontalScrollbar
  position: absolute
  z-index: 9999
  height: 16px
  left: 2px
  right: 2px
  bottom: 2px
  overflow: hidden
.iScrollHorizontalScrollbar.iScrollBothScrollbars
  right: 18px
.iScrollVerticalScrollbar
  position: absolute
  z-index: 9999
  width: 16px
  bottom: 2px
  top: 2px
  right: 2px
  overflow: hidden
.iScrollVerticalScrollbar.iScrollBothScrollbars
  bottom: 18px
.iScrollIndicator
  position: absolute
  background: #cc3f6e
  border-width: 1px
  border-style: solid
  border-color: #EB97B4 #7C2845 #7C2845 #EB97B4
  border-radius: 8px
.iScrollHorizontalScrollbar .iScrollIndicator
  height: 100%
  background: -moz-linear-gradient(left,  #cc3f6e 0%, #93004e 100%)
  background: -webkit-linear-gradient(left,  #cc3f6e 0%,#93004e 100%)
  background: -o-linear-gradient(left,  #cc3f6e 0%,#93004e 100%)
  background: -ms-linear-gradient(left,  #cc3f6e 0%,#93004e 100%)
  background: linear-gradient(to right,  #cc3f6e 0%,#93004e 100%)
.iScrollVerticalScrollbar .iScrollIndicator
  width: 100%
  background: -moz-linear-gradient(top, #cc3f6e 0%, #93004e 100%)
  background: -webkit-linear-gradient(top,  #cc3f6e 0%,#93004e 100%)
  background: -o-linear-gradient(top, #cc3f6e 0%,#93004e 100%)
  background: -ms-linear-gradient(top, #cc3f6e 0%,#93004e 100%)
  background: linear-gradient(to bottom,  #cc3f6e 0%,#93004e 100%)
/* end */
</style>
